<template>
	<div class="login-background">
		<div class="login-box">
			<h2 class="login-title">用户登录</h2>
			<!-- 只要el开头的标签，都是elementpuls的标签 -->
			<el-form class="login-form" label-width="120px">
				<el-form-item label="Username:">
					<el-input v-model="user.username" maxlength="15" placeholder="请输入"></el-input>
				</el-form-item>
				<el-form-item label="Password:">
					<el-input v-model="user.password" maxlength="18" type="password" placeholder="请输入"
						show-password></el-input>
				</el-form-item>
				<el-form-item>
					<el-tooltip class="box-item" effect="dark" content="需要同意用户协议才可登录" placement="right-end">
						<el-checkbox>同意用户协议</el-checkbox>
					</el-tooltip>
				</el-form-item>
				<el-form-item>
					<el-button color="#aaaaff" type="primary" @click="login()" plain>登录</el-button>
					<el-button color="#00aaff" type="primary" @click="router.push('/Register')" plain>去注册</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
	// 组件的引入
	import {
		ElMessageBox,
		ElNotification
	} from 'element-plus'
	// vue实例的引入
	import {
		getCurrentInstance,
		reactive,
		watch,
	} from "vue";
	// 导入路由对象
	import {
		useRouter
	} from "vue-router";
	//引入仓库对象
	import useUser from "@/store/user.js"

	// 通过导出的库对象，创建一个用户的库
	let userData = useUser();
	// 路由对象
	let router = useRouter();

	// 封装一个响应式的用户消息对象
	let user = reactive({
		username: "admin",
		password: "123456"
	});

	// 输入的验证
	// 输入验证的功能，使用侦听器实现
	// 这里需要使用函，将值作为返回值使用
	// 如果这里侦听到的是一个值，这个值不是个对象，那么值是可以直接侦听的
	// 但是，如果侦听的是一个对象中的某个值，直接传入这个值，相当于侦听这个对象的这个值的副本
	// 所以值无法被侦听，如果需要这样操作，需要将值通过函数返回值的形式传入
	watch(() => user.password, (newValue, oldValue) => {
		// 由8-12位的数字和大小写字母组成,大小写字母，数字最少要出现一次
		// 这里使用正则表达式，验证数据的有效性

		// /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,12}$/.test();
		let flag = /^[0-9a-zA-Z]+$/.test(newValue);

		if (!flag) {
			// 如果验证失败，就弹出提示框
			ElNotification({
				title: '错误!',
				message: '输入只能为大小写字母！',
				type: 'error',
				offset: 100,
				duration: 3000,
			})
		}
	})

	// watch(() => user.username, (newValue, oldValue) => {
	// 	// 由3-11位的数字和大小写字母组成
	// })


	// 获取vue实例对象
	let {
		proxy
	} = getCurrentInstance();

	let login = () => {
		// 登录之前应该验证数据的可行性
		// 登录之后服务器再次进行验证
		proxy.$axios.post("/users/login", {
			username: user.username,
			password: user.password,
		}).then((rls) => {
			// 用户登录成功，从服务器获取到了用户的相关信息
			console.log(rls);
			// 用户的相关消息保存在这个组件中，合适吗？
			// 如果保存在这个组件中，是没有办法保存登录状态的
			// 现在需要使用到pinia插件，保存全局的值

			// 将值保存到pinia库中，方便其他组件使用
			// 因为我们不可能一直停留在登录页面，需要把这个用户值在其他地方使用
			if (rls.data.result) {
				//登录成功
				userData.data = rls.data.data;
				// 使用回调函数实现
				ElMessageBox.alert(`欢迎回来`, `亲爱的用户${userData.data.nickname}`, {
					confirmButtonText: '开始使用',
					draggable: true,
					callback: () => {
						// 在这里完成功能页面的编程式路由
						router.push("/Main");
					}
				})
			} else {
				//登录失败
				ElNotification({
					title: '错误!',
					message: rls.data.describe,
					type: 'error',
					offset: 100,
					duration: 3000,
				})
			}
		}).catch((error) => {
			ElNotification({
				title: '错误!',
				message: '用户登录失败，请检查网络连接！',
				type: 'error',
				offset: 100,
				duration: 3000,
			})
		});
	}
</script>

<style scoped>
	.login-background {
		width: 100vw;
		height: 100vh;
		background-color: #f0f2f5;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-box {
		width: 400px;
		padding: 20px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
		background-color: #ffffff;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.login-title {
		margin-bottom: 20px;
		text-align: center;
	}

	.login-form {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
</style>